<template>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent
} from 'echarts/components';
import {
    BarChart
} from 'echarts/charts';
import {
    CanvasRenderer
} from 'echarts/renderers';

echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]
);

export default {
	name: 'chart',

	data() {
		return {

		}
	},

	mounted() {
		var chartDom = document.getElementById('main');
		var myChart = echarts.init(chartDom);
		var option;
		
		option = {
		    title: {
		        text: '阶梯瀑布图',
		        subtext: 'From ExcelHome',
		        sublink: 'http://e.weibo.com/1341556070/Aj1J2x5a5'
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
		            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        },
		        formatter: function (params) {
		            var tar;
		            if (params[1].value !== '-') {
		                tar = params[1];
		            }
		            else {
		                tar = params[0];
		            }
		            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
		        }
		    },
		    legend: {
		        data: ['支出', '收入']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		        type: 'category',
		        splitLine: {show: false},
		        data: function () {
		            var list = [];
		            for (var i = 1; i <= 11; i++) {
		                list.push('11月' + i + '日');
		            }
		            return list;
		        }()
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [
		        {
		            name: '辅助',
		            type: 'bar',
		            stack: '总量',
		            itemStyle: {
		                barBorderColor: 'rgba(0,0,0,0)',
		                color: 'rgba(0,0,0,0)'
		            },
		            emphasis: {
		                itemStyle: {
		                    barBorderColor: 'rgba(0,0,0,0)',
		                    color: 'rgba(0,0,0,0)'
		                }
		            },
		            data: [0, 900, 1245, 1530, 1376, 1376, 1511, 1689, 1856, 1495, 1292]
		        },
		        {
		            name: '收入',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                show: true,
		                position: 'top'
		            },
		            data: [900, 345, 393, '-', '-', 135, 178, 286, '-', '-', '-']
		        },
		        {
		            name: '支出',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                show: true,
		                position: 'bottom'
		            },
		            data: ['-', '-', '-', 108, 154, '-', '-', '-', 119, 361, 203]
		        }
		    ]
		};

		option && myChart.setOption(option);
	}

}

</script>